import React, { FC } from 'react'
import styled, { StyledComponent } from "styled-components"
import Ellipse from '@/assert/images/salesAnalysis/ellipse_dark.png'
import { IFinance } from '@/types/pages/finance/interface'
import EllPlane from '@/assert/images/salesAnalysis/ellipse_plane.png'
import EllCover from '@/assert/images/salesAnalysis/ellipse.png'
import EllCoverLine from '@/assert/images/salesAnalysis/ellipse_line.png'
import Up from '@/assert/images/button/up-g.png'
import Down from '@/assert/images/button/down-b.png'
import { toThousands } from '@/utlis/utlis'
import { Line, Circle } from 'rc-progress'
import Title from '@/components/pages/title'
import Count from '@/components/pages/count'
import Rate from '@/components/pages/crosswiseRate'
import frame_url from '@/assert/images/bg_big.png'
import bg_verticle_url from '@/assert/images/bg_verticle.png'
const SaleCount = styled.div<{image?:string}>`
    width: 100%;
    height: 100%; 
    color:#fff;
    background-repeat: no-repeat;  
    .title{ 
        position: relative; 
        z-index: 1;
        margin-left: 6rem;
        color:#fff;
        font-weight: bold;
      }
    .content{
      position: relative; 
      flex:1 1 35%; 
      display: flex; 
      justify-content:center;
      align-content: center; 
      .cylinder{
        flex: 1 1 15%;
        text-align: right;
        position: relative; 
        .back{ 
          display: inline-block;
          position: relative; 
          top:50%;
          transform: translate(0,-50%);
          width: 4.3rem;
          height: 4.2rem;   
          margin:auto;
          background-image: url(${(props)=>props.image});
          background-size: 100% 100%; 
          background-repeat: no-repeat;
        } 
      }  
      .count{
        flex: 1 1 25%;
        display: flex;
      }
      .rate{
        flex: 1 1 35%; 
        padding-top: 2rem;
        margin-left: -2rem;
      }
    }
 
`

const Content: FC<Partial<IFinance>&{image?:string}> = function (props) {
  return (
    <SaleCount image={props.image}>
      <div className='title'>{props.name!}</div>
      <div className='content'>
        <div className='cylinder' >
          <div className='back' />
        </div>
        <div className='count'><Count num={props.num!} unit={props.unit!} /></div>
        <div className='rate'><Rate comparisonText={props.comparisonText} upDownStatus={props.upDownStatus!} saleRate={props.saleRate!}/></div>
      </div> 
    </SaleCount>
  )
}

export default Content
